import React from "react";
import { useNavigate } from "react-router-dom";
import { Button, Form, Input, message } from "antd";
import {
  LockOutlined,
  UserOutlined,
  EyeInvisibleOutlined,
  EyeTwoTone,
} from "@ant-design/icons";
import styles from "./index.module.scss";

import { useStore } from "@/store";

const rules = {
  username: [{ required: true, message: "请输入用户名" }],
  password: [{ required: true, message: "请输入密码" }],
};

const Login = () => {
  const { loginStore } = useStore();

  const navigate = useNavigate();
  const handleLogin = (values) => {
    if (values.username === "admin" && values.password === "123456") {
      // todo:登录接口 try catch
      // await loginStore.getToken({})

      navigate("/", { replace: true });
      message.success("登录成功");
    } else {
      // If validation fails, display an error message
      message.error("用户名或密码错误");
      navigate("/login");
    }
  };

  return (
    <div className={styles.login}>
      <h1>IQCS</h1>
      <Form onFinish={handleLogin}>
        <Form.Item name="username" rules={rules.username}>
          <Input prefix={<UserOutlined />} placeholder="用户名" />
        </Form.Item>

        <Form.Item name="password" rules={rules.password}>
          <Input.Password
            prefix={<LockOutlined />}
            placeholder="密码"
            iconRender={(visible) =>
              visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
            }
          />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Login;
